<!-- <template>
  <div id="forget">
    <el-steps :active="1">
      <el-step title="安全验证">
        <svg-icon icon-class="security" slot="icon" />
      </el-step>
      <el-step title="找回密码">
        <svg-icon icon-class="findpwd" slot="icon" />
      </el-step>
      <el-step title="操作成功">
        <svg-icon icon-class="success" slot="icon" />
      </el-step>
    </el-steps>
    <p>123</p>
  </div>
</template>

<script>
export default {

}
</script>

<style>
  /* .el-icon-seccurity {
    background: url(../icons/svg/security.svg) center no-repeat;
    background-size: contain;
  }
  .el-icon-seccurity::before {
    content: "bg";
    font-size: 50px;
    visibility: hidden;
  } */
  .el-step__icon.is-text {
    border: none;
  }
  .el-step .svg-icon {
    width: 45px;
    height: 45px;
  }
  .el-step__icon {
    width: 60px;
    height: 60px;
  }
  .el-step.is-horizontal .el-step__line {
    top: 30px;
  }
</style> -->


<template>
  <div>
    <el-steps :active="active" finish-status="success">
  <el-step title="步骤 1"></el-step>
  <el-step title="步骤 2"></el-step>
  <el-step title="步骤 3"></el-step>
</el-steps>

<el-button style="margin-top: 12px;" @click="next">下一步</el-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        active: 0
      };
    },

    methods: {
      next() {
        if (this.active++ > 2) this.active = 0;
      }
    }
  }
</script>